<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>快乐购 - 商品管理</title>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<!-- CSS -->
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/glyphicons-halflings.min.css">
		<link rel="stylesheet" type="text/css" href="../css/default.min.css" />

		<!-- JS -->
		<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>

		<script src="../js/html/default.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/html/product.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<!-- 导航条开始 -->
		<header class="navbar navbar-expand-md navbar-light bg-light">
			<nav class="container">
				<a href="../index.html" class="navbar-brand">
					<img src="../img/logo.png" alt="Happy Go" />
				</a>
				<a href="#navbar-menu1" data-toggle="collapse" class="navbar-toggler collapsed">
					<i class="navbar-toggler-icon"></i>
				</a>

				<div id="navbar-menu1" class="navbar-collapse collapse">
					<div class="navbar-text">
						<span>Admin，</span>
						<span>欢迎来到快乐购管理页面！&nbsp;</span>
					</div>

					<div class="ml-auto">
						<ul class="navbar-nav nav">
							<li class="nav-item">
								<a href="index.html" class="nav-link">管理首页</a>
							</li>
							<li class="nav-item dropdown">
								<a href="#" data-toggle="dropdown" class="nav-link active">
									<span>商品</span>
									<i class="dropdown-toggle"></i>
								</a>
								<div class="dropdown-menu">
									<a href="product-category.html" class="dropdown-item">类别管理</a>
									<a href="product.html" class="dropdown-item active">商品管理</a>
								</div>
							</li>
							<li class="nav-item">
								<a href="order.html" class="nav-link">订单</a>
							</li>
							<li class="nav-item">
								<a href="user.html" class="nav-link">用户</a>
							</li>
							<li class="nav-item">
								<a href="ads.html" class="nav-link">广告</a>
							</li>
							<li class="nav-item">
								<a href="../index.html" class="nav-link">购物首页</a>
							</li>
							<li class="nav-item">
								<a href="../login.html" class="nav-link">注销</a>
							</li>
						</ul>
					</div>
				</div>
			</nav>
		</header>
		<!-- //导航条结束 -->

		<!-- 页面主体部分 -->
		<section class="container mt-2">
			<div class="h4 border-bottom">
				<span>商品管理</span>
				<small class="float-right">
					<a href="#modal-add-product" class="btn btn-sm btn-outline-success py-0" data-toggle="modal">新增商品</a>
				</small>
			</div>

			<!-- 商品名称搜索表单 -->
			<form action="" class="form-inline">
				<div class="form-group form-group-sm mr-2">
					<label class="col-form-label col-form-label-sm">类别</label>
					<select class="col form-control form-control-sm">
						<option>全部</option>
						<optgroup label="女装/内衣">
							<option>毛呢外套</option>
							<option>羽绒服</option>
							<option>棉服</option>
							<option>夹克</option>
						</optgroup>
						<optgroup label="男装/运动户外">
							<option>单西</option>
							<option>棉衣</option>
						</optgroup>
						<optgroup label="女鞋/男鞋/箱包">
							<option>平底单鞋</option>
							<option>高跟单鞋</option>
						</optgroup>
					</select>
				</div>

				<div class="form-group form-group-sm">
					<label class="col-form-label col-form-label-sm">商品名称</label>
					<div class="input-group input-group-sm col px-0">
						<input type="search" class="form-control" placeholder="输入商品名称关键字..." />
						<div class="input-group-append">
							<button class="btn btn-outline-secondary">
								<i class="glyphicon-zoom-in"></i>
								<span class="sr-only">搜索</span>
							</button>
						</div>
					</div>
				</div>
			</form>

			<br />

			<!-- 商品数据 -->
			<table class="table table-sm table-hover table-striped">
				<thead class="thead-dark">
					<tr>
						<th>#</th>
						<th>名称</th>
						<th>单价(元)</th>
						<th>库存</th>
						<th class="d-none d-md-table-cell">分类</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<img src="../img/products/a.png" height="30" data-toggle="popover" />
						</td>
						<td>
							<div class="product-title">王小鸭双面羊绒大衣女中长款2017新款韩版潮长袖秋冬装毛呢外套女</div>
						</td>
						<td>1,398.00</td>
						<td>86</td>
						<td class="d-none d-md-table-cell">
							<span class="badge badge-secondary">女装/内衣</span>
							<span class="badge badge-secondary">毛呢外套</span>
						</td>
						<td class="dropdown">
							<button class="btn btn-sm btn-outline-primary dropdown-toggle py-0" data-toggle="dropdown">管理</button>
							<div class="dropdown-menu dropdown-menu-right">
								<a href="#modal-show-product" data-toggle="modal" class="dropdown-item">查看</a>
								<a href="#modal-edit-product" data-toggle="modal" class="dropdown-item">编辑</a>
								<div class="dropdown-divider"></div>
								<a href="" data-toggle="del" class="dropdown-item text-danger">移除</a>
							</div>
						</td>
					</tr>

					<tr>
						<td>
							<img src="../img/products/b.png" height="20" data-toggle="popover" />
						</td>
						<td>
							<div class="product-title">2017秋冬新款无双面羊绒大衣女短款韩版潮小个子羊毛呢子外套加厚</div>
						</td>
						<td>398.00</td>
						<td>133</td>
						<td class="d-none d-md-table-cell">
							<span class="badge badge-secondary">女装 /内衣</span>
							<span class="badge badge-secondary">毛呢外套</span>
						</td>
						<td class="dropdown">
							<button class="btn btn-sm btn-outline-primary dropdown-toggle py-0" data-toggle="dropdown">管理</button>
							<div class="dropdown-menu dropdown-menu-right">
								<a href="#modal-show-product" data-toggle="modal" class="dropdown-item">查看</a>
								<a href="#modal-edit-product" data-toggle="modal" class="dropdown-item">编辑</a>
								<div class="dropdown-divider"></div>
								<a href="" data-toggle="del" class="dropdown-item text-danger">移除</a>
							</div>
						</td>
					</tr>

					<tr>
						<td>
							<img src="../img/products/c.png" height="20" data-toggle="popover" />
						</td>
						<td>
							<div class="product-title">Five Plus新女冬装刺绣双排扣长款长袖毛呢西装外套2HD5345220</div>
						</td>
						<td>339.00</td>
						<td>41</td>
						<td class="d-none d-md-table-cell">
							<span class="badge badge-secondary">女装 /内衣</span>
							<span class="badge badge-secondary">毛呢外套</span>
						</td>
						<td class="dropdown">
							<button class="btn btn-sm btn-outline-primary dropdown-toggle py-0" data-toggle="dropdown">管理</button>
							<div class="dropdown-menu dropdown-menu-right">
								<a href="#modal-show-product" data-toggle="modal" class="dropdown-item">查看</a>
								<a href="#modal-edit-product" data-toggle="modal" class="dropdown-item">编辑</a>
								<div class="dropdown-divider"></div>
								<a href="" data-toggle="del" class="dropdown-item text-danger">移除</a>
							</div>
						</td>
					</tr>

					<tr>
						<td>
							<img src="../img/products/g.png" height="20" data-toggle="popover" />
						</td>
						<td>
							<div class="product-title">MECITY女装2017冬季新款双面呢羊毛系带大衣外套</div>
						</td>
						<td>1,499.00</td>
						<td>22</td>
						<td class="d-none d-md-table-cell">
							<span class="badge badge-secondary">女装 /内衣</span>
							<span class="badge badge-secondary">毛呢外套</span>
						</td>
						<td class="dropdown">
							<button class="btn btn-sm btn-outline-primary dropdown-toggle py-0" data-toggle="dropdown">管理</button>
							<div class="dropdown-menu dropdown-menu-right">
								<a href="#modal-show-product" data-toggle="modal" class="dropdown-item">查看</a>
								<a href="#modal-edit-product" data-toggle="modal" class="dropdown-item">编辑</a>
								<div class="dropdown-divider"></div>
								<a href="" data-toggle="del" class="dropdown-item text-danger">移除</a>
							</div>
						</td>
					</tr>

					<tr>
						<td>
							<img src="../img/products/h.png" height="20" data-toggle="popover" />
						</td>
						<td>
							<div class="product-title">Apple MacBook Air 13.3英寸笔记本电脑I5 8G 128G MQD32CH/A银色</div>
						</td>
						<td>6,058.00</td>
						<td>100</td>
						<td class="d-none d-md-table-cell">
							<span class="badge badge-secondary">手机/数码/电脑办公 </span>
							<span class="badge badge-secondary">笔记本</span>
						</td>
						<td class="dropdown">
							<button class="btn btn-sm btn-outline-primary dropdown-toggle py-0" data-toggle="dropdown">管理</button>
							<div class="dropdown-menu dropdown-menu-right">
								<a href="#modal-show-product" data-toggle="modal" class="dropdown-item">查看</a>
								<a href="#modal-edit-product" data-toggle="modal" class="dropdown-item">编辑</a>
								<div class="dropdown-divider"></div>
								<a href="" data-toggle="del" class="dropdown-item text-danger">移除</a>
							</div>
						</td>
					</tr>
				</tbody>
			</table>

		</section>

		<!-- 查看商品模态框部分 -->
		<div id="modal-show-product" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title">
							<i class="glyphicon-zoom-in"></i>
							<span>查看商品</span>
						</div>
						<button class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						<div class="container-fluid">
							<div class="row">
								<div class="col-md-5">
									<div class="form-group">
										<img src="../img/products/h.png" class="img-thumbnail" />
									</div>
								</div>
								<div class="col-md">
									<div class="form-row">
										<label class="col-form-label pb-0">商品名称：</label>
										<div class="form-control-plaintext pt-0 pl-2 text-muted small">
											Apple MacBook Air 13.3英寸笔记本电脑I5 8G 128G MQD32CH/A银色
										</div>
									</div>

									<div class="form-row">
										<label class="col-form-label pr-4">单价：</label>
										<div class="col form-control-plaintext text-muted">￥6,058.00</div>
									</div>

									<div class="form-row">
										<label class="col-form-label pr-2">库存量：</label>
										<div class="col form-control-plaintext text-muted">100</div>
									</div>

									<div class="form-row">
										<label class="col-form-label pb-0">所属类别：</label>
										<div class="form-control-plaintext pt-0 pl-2 text-muted">
											<span class="badge badge-secondary">手机/数码/电脑办公</span>
											<span class="badge badge-secondary">笔记本</span>
										</div>
									</div>
								</div>
							</div>

							<div class="form-row">
								<label class="control-label pb-0">详情：</label>
								<div class="form-control-plaintext small pt-0">
									品牌名称：Apple/苹果<br /> 更多参数产品参数： <br /> 产品名称：Apple/苹果 MacBook Air ...<br /> 品牌: Apple/苹果<br /> 屏幕尺寸: 13.3英寸<br />
									CPU: 不详<br />显卡类型: 英特尔 HD Graphics 6000<br /> 显存容量: 共享内存容量<br /> 机械硬盘容量: 无机械硬盘<br /> 内存容量: 8GB<br /> 操作系统: Mac
									OS
								</div>
							</div>

						</div>
					</div>
					<div class="modal-footer">
						<button class="btn btn-outline-secondary" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- //查看商品模态框部分结束 -->

		<!-- 新增商品模态框部分 -->
		<div id="modal-add-product" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title">
							<i class="glyphicon-plus"></i>
							<span>新增商品</span>
						</div>
						<button class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						<form id="form-add-product" action="" class="container-fluid">
							<div class="row">
								<div class="col-md-5">
									<div class="form-group">
										<label>
											<img src="../img/products/product_default.png" class="img-thumbnail" />
											<input type="file" accept="image/*" hidden="hidden" />
										</label>
										<div class="text-muted">
											*点击设置图片
										</div>
									</div>
								</div>
								<div class="col-md">
									<div class="form-group form-row">
										<label class="col-form-label col-form-label-sm">商品名称</label>
										<input class="form-control form-control-sm" required="required" />
									</div>

									<div class="form-group form-row">
										<label class="col-form-label col-form-label-sm pr-4">单价</label>
										<input class="col form-control form-control-sm" type="number" min="0.00" step="1.00" required="required" />
									</div>

									<div class="form-group form-row">
										<label class="col-form-label col-form-label-sm pr-2 mr-1">库存量</label>
										<input class="col form-control form-control-sm" type="number" required="required" />
									</div>

									<div class="form-group form-row">
										<label class="col-form-label col-form-label-sm pr-4">类别</label>
										<select class="col form-control form-control-sm">
											<optgroup label="女装/内衣">
												<option>毛呢外套</option>
												<option>羽绒服</option>
												<option>棉服</option>
												<option>夹克</option>
											</optgroup>
											<optgroup label="男装/运动户外">
												<option>单西</option>
												<option>棉衣</option>
											</optgroup>
											<optgroup label="女鞋/男鞋/箱包">
												<option>平底单鞋</option>
												<option>高跟单鞋</option>
											</optgroup>
										</select>
									</div>

								</div>
							</div>

							<div class="form-group form-row">
								<label class="col-form-label col-form-label-sm">详情</label>
								<textarea class="form-control form-control-sm" rows="5"></textarea>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button class="btn btn-outline-success" form="form-add-product" type="submit">新增商品</button>
						<button class="btn btn-outline-secondary" data-dismiss="modal" type="button">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- //新增商品模态框部分结束 -->

		<!-- 编辑商品模态框部分 -->
		<div id="modal-edit-product" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title">
							<i class="glyphicon-edit"></i>
							<span>编辑商品</span>
						</div>
						<button class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						<form id="form-edit-product" action="" class="container-fluid">
							<div class="row">
								<div class="col-md-5">
									<div class="form-group">
										<label>
											<img src="../img/products/h.png" class="img-thumbnail" />
											<input type="file" accept="image/*" hidden="hidden" />
										</label>
										<div class="text-muted">
											*点击设置图片
										</div>
									</div>
								</div>
								<div class="col-md">
									<div class="form-group form-row">
										<label class="col-form-label col-form-label-sm">商品名称</label>
										<input class="form-control form-control-sm" value="Apple MacBook Air 13.3英寸笔记本电脑I5 8G 128G MQD32CH/A银色" required="required" />
									</div>
						
									<div class="form-group form-row">
										<label class="col-form-label col-form-label-sm pr-4">单价</label>
										<input class="col form-control form-control-sm" value="6058.00" min="0.00" step="1.00" required="required" />
									</div>
						
									<div class="form-group form-row">
										<label class="col-form-label col-form-label-sm pr-2 mr-1">库存量</label>
										<input class="col form-control form-control-sm" type="number" value="100" required="required" />
									</div>
						
									<div class="form-group form-row">
										<label class="col-form-label col-form-label-sm pr-4">类别</label>
										<select class="col form-control form-control-sm">
											<optgroup label="女装/内衣">
												<option>毛呢外套</option>
												<option>羽绒服</option>
												<option>棉服</option>
												<option>夹克</option>
											</optgroup>
											<optgroup label="男装/运动户外">
												<option>单西</option>
												<option>棉衣</option>
											</optgroup>
											<optgroup label="女鞋/男鞋/箱包">
												<option>平底单鞋</option>
												<option>高跟单鞋</option>
											</optgroup>
											<optgroup label="手机/数码/电脑办公">
												<option selected="selected">笔记本</option>
												<option>平板电脑</option>
												<option>台式机</option>
											</optgroup>
										</select>
									</div>
						
								</div>
							</div>
						
							<div class="form-group form-row">
								<label class="col-form-label col-form-label-sm">详情</label>
								<textarea class="form-control form-control-sm" rows="5">品牌名称：Apple/苹果
更多参数产品参数：
产品名称：Apple/苹果 MacBook Air ...
品牌: Apple/苹果
屏幕尺寸: 13.3英寸
CPU: 不详
显卡类型: 英特尔 HD Graphics 6000
显存容量: 共享内存容量
机械硬盘容量: 无机械硬盘
内存容量: 8GB
操作系统: Mac OS</textarea>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button class="btn btn-outline-success" form="form-add-product" type="submit">更新商品</button>
						<button class="btn btn-outline-secondary" data-dismiss="modal" type="button">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- //编辑商品模态框部分结束 -->

		<!-- //页面主体部分结束 -->

		<!-- 页面脚部部分 -->
		<footer class="mt-2">
			<hr />
			<div class="container">
				<div class="row">
					<div class="col-sm my-2 d-flex justify-content-sm-end justify-content-center">
						<img src="../img/foot_img3.png" class="img-fluid rounded center-block" alt="">
					</div>
					<div class="col-sm my-2 d-flex justify-content-sm-start justify-content-center">
						<img src="../img/foot_img4.png" class="img-fluid rounded center-block" alt="">
					</div>
				</div>

				<div class="row">
					<div class="col text-center small text-muted">
						<div>Rights Reserved 免费服务热线: 400-800-0001 | 固话也可拨打: 800-000-0001 E-Mail: service@happygo.com</div>
						<div>湘ICP备10000001号 信息网络传播视听节目许可证号：1000001</div>
					</div>
				</div>
			</div>
		</footer>
		<!-- //页面脚部部分结束 -->

	</body>

</html>
